 Creating a
New Menu
1. Base your custom menu on our sample
Implementation (sample.html), do not start from scratch. View the
source html of sample.html for information and a first hand look at how
to integrate the menu with a web page.
2. To modify the sample (sample.html) open both 'menu_settings.js'
and 'menu_styles.css' in a text editor. menu_styles.css may
contain any valid CSS syntax to customize the look of the menu groups
and items. menu_settings.js contains the menu structure, links,
dimensions, orientation, etc. After modifying a setting, save the
file and refresh, or open the sample.html file in a browser to view the
changes.
Note: Several menu settings are also made available within the html page
itself, these few select settings are global and will apply to all the
menus on the page.
3. After customizing the look of your menu move it to your
document by first copying and pasting the two required sections (see the
source of sample.html). The first large section should be pasted
in the head of your HTML document and only needs to appear once
regardless of how many instances of the menu you are using. The
second statement positions the menu as an inline element (same as an
image tag).
Next move the data files and supporting script files (cbrowser_??.js,
cmd_pixel.gif, menu_settings.js, menu_styles.css). You can rename
the settings files and locate the script files in a different folder,
adjust the codebase value in the html page to the correct folder
location of the 'cbrowser_??.js' and 'cmd_pixel.gif' files, terminate
the codebase with a '/' (leave the codebase blank if in the same
folder).
At this point your menu should be working in your page, if not check the
FAQ for common problems, also double check the location of your
supporting script files, references to them in the html page, and
terminate the codebase value with a '/' if pointing to a different
folder.
4. Further customize your menu for Netscape 4 if desired.
Netscape 4 is to dated and non compliant to be 100% compatible with CSS,
however you can duplicate the look and functionality of your web menu
for this browser. A special settings file (menu_ns4_styles.js)
which must appear in the same folder as your other settings files is
made available for exacting a Netscape 4 menu.
Hints &
Tips
 To move
your data files (menu_settings.js, menu_styles.css, menu_ns4_styles.js)
to a different folder you must specify the correct folder in the source
of the HTML page. First specify the folder as well as the correct
names in the script and link pointers at the top of the menu code
section in the head. Then define the folder location only using
the 'cdd_datafile' setting. Terminate the value with a '/' (i.e.
cdd_datafile = "myfolder/")
Do not
position the menu inside a <p> tag, for reasons unknown, Internet
Explorer has bugs which cause rendering problems under this scenario.
Create
multiple menus for a single page by creating multiple data groups.
Notice in the settings file that the first group is titled.. function
cdd_menu0, duplicate the entire menu section and increment the index...
function cdd_menu1. Reference the new group by using the correct
index with the create_menu statement in the source HTML...
<script language="JavaScript">create_menu(1)</script>
You can
use your own icon images, a different one with each menu item if you
wish. Define unlimited custom icon images using the library section of the menu_settings.js
file. Then reference and use any defined images with an item by using the 'this.icon_relX_X' or 'this.icon_absX_X'
parameters, set their value to the index number of the custom icon image which
you defined in the library section of the same settings file.
Target
your links to a frame, new window, etc. using... 'this.url_targetX_X =
"_new" This example targets a new window. There is also a
default setting in the source html head section.
All URL
links and image file references are defined relative to the settings
file (menu_settings.js) not the location of the HTML page. This
scheme allows for your file references to work no matter where the HTML
document is located. For this to function properly you must define
the cdd__database value in the HTML source head script section.
Set it equal to the folder location of your settings data file relative
to the html page, terminate the value with a '/' (i.e. cdd__database =
"mydatafolder/") |
DHTML
Web Menu - Help